---
id: index
title: css 相关知识点
---

### 在 Web 应用中引入 CSS 样式的方式有以下几种：

- 外部样式表：通过 link 标签将一个外部的 CSS 文件链接到 HTML 页面中。例如：

```html
<link rel="stylesheet" href="styles.css" />
```

- 内部样式表：在 HTML 文件中使用 style 标签定义 CSS 样式。例如：

```html
<style>
  /* CSS 样式定义 */
</style>
```

- 内联样式：在 HTML 标签中使用 style 属性定义 CSS 样式。例如：

```html
<div style="background-color: red;"></div>
```

- CSS 模块：使用 import 导入 CSS 模块，然后在组件中使用。例如：

```html
<style scoped>
  @import "styles.css";

  /* CSS 样式定义 */
</style>
```

:::tip
其中，外部样式表和内部样式表是最常用的引入 CSS 样式的方式。外部样式表通常用于全局 CSS 样式，而内部样式表通常用于局部 CSS 样式。内联样式和 CSS 模块适用于需要动态控制样式的情况。
:::

### 什么是浮动？如何清除浮动？

浮动是一种元素的定位方式，可以让元素脱离文档流，实现图文混排、布局等效果。清除浮动指的是解决浮动元素对布局的影响，常见的方法有使用清除浮动的伪元素、使用 overflow 属性和使用清除浮动的容器等。

### 什么是响应式设计？如何实现响应式布局？

响应式设计是指通过针对不同的屏幕尺寸和设备类型，提供不同的布局和功能，以适应不同的用户需求。实现响应式布局的常见方法有使用媒体查询、使用百分比布局、使用弹性盒布局和使用 Grid 布局等。

### 什么是伪类和伪元素？它们有什么区别？

伪类是用来为已有的元素添加特定的样式，例如 :hover 和 :active 等。伪元素是用来创建一个虚拟的元素，并对其应用样式，例如 ::before 和 ::after 等。它们的区别在于伪类是用来改变元素的状态，而伪元素是用来插入额外的内容。

### 如何居中一个元素？

实现元素的居中有多种方法，包括使用 margin 属性、使用绝对定位和 transform 属性、使用 Flex 布局和使用 Grid 布局等。

### 垂直居中一个元素有哪些方法可以实现？

- 使用 flex 布局。将父元素设置为 flex 布局，然后使用 justify-content 和 align-items 属性分别设置水平和垂直居中。例如：

```html
.parent { display: flex; justify-content: center; align-items: center; }
```

- 使用 position 属性。将元素的 position 属性设置为 absolute 或 fixed，然后使用 top 和 left 属性将元素水平和垂直居中。例如：

```html
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%,
-50%); }
```

- 使用 display: table-cell。将父元素的 display 属性设置为 table，将子元素的 display 属性设置为 table-cell，然后使用 vertical-align 属性设置垂直居中。例如：

```html
.parent { display: table; } .child { display: table-cell; vertical-align:
middle; }
```

- 使用 line-height。将元素的 line-height 属性设置为和父元素的高度一样，然后使用 text-align 属性将文本水平居中。例如：

```html
.parent { height: 100px; line-height: 100px; text-align: center; }
```

### inline 和 block 元素的区别？

在 HTML 中，元素可以分为两种类型：块级元素和内联元素（也称为行内元素）。

块级元素通常会占据一整行，它们可以设置宽度、高度、外边距和内边距，并且可以包含其他块级元素或内联元素。常见的块级元素包括 div、h1、p、ul、li 等。

内联元素则通常只占据它们所在行的一部分，它们不能设置宽度和高度，只能设置水平外边距和内边距。内联元素通常用于包裹文字或其他内联元素。常见的内联元素包括 a、span、em、strong、img 等。

下面是块级元素和内联元素的主要区别：

|      区别      |            块级元素            |             内联元素             |
| :------------: | :----------------------------: | :------------------------------: |
|    显示方式    |        每个元素占据一行        |           元素在一行中           |
|   宽度和高度   |       可以设置宽度和高度       |       不可以设置宽度和高度       |
| 外边距和内边距 |     可以设置外边距和内边距     | 只能设置水平方向的外边距和内边距 |
|      内容      | 可以包含其他块级元素和内联元素 |       只能包含其他内联元素       |

需要注意的是，有些元素可以同时作为块级元素和内联元素。比如，a 元素默认是内联元素，但是通过 CSS 可以将其设置为块级元素。同样，span 元素默认是内联元素，但是也可以通过 CSS 将其设置为块级元素。

### position 属性的值有哪些？分别有什么作用？

- 在 CSS 中，position 属性用于指定元素的定位方式。常见的 position 属性的值有以下几种：

  - static：元素的默认定位方式，不会被特殊处理，遵循文档流的规则进行布局。
  - relative：相对定位，相对于元素在文档流中的初始位置进行定位，不脱离文档流，不影响其他元素的位置。
  - absolute：绝对定位，相对于离当前元素最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档进行定位，脱离文档流，会影响其他元素的位置。
  - fixed：固定定位，相对于浏览器窗口进行定位，脱离文档流，不影响其他元素的位置。
  - sticky：粘性定位，是相对定位和固定定位的混合，元素根据用户的滚动位置进行定位。

- 这些定位方式的作用如下：
  - relative：通常用于微调元素的位置，相对于元素在文档流中的初始位置进行定位。
  - absolute：常用于实现悬浮效果、模态框、下拉菜单等，通过设置 top、bottom、left、right 属性相对于已定位的祖先元素进行定位。
  - fixed：常用于实现悬浮导航栏、返回顶部等效果，保持元素相对于窗口固定位置不变。
  - sticky：常用于实现表格的固定表头、导航栏吸顶效果等，可以使元素根据滚动位置自动切换定位方式。

### CSS 选择器的优先级是如何计算的？

CSS 选择器的优先级是根据不同类型的选择器的数量和权重进行计算的。一般来说，选择器的优先级可以从高到低分为以下四个级别：

- 内联样式：样式直接应用于 HTML 元素的 style 属性中，它的权重是最高的，为 1000。
- ID 选择器：通过 # 符号来定义，它的权重为 100。
- 类选择器、属性选择器和伪类选择器：通过 .、[] 和 : 符号来定义，它们的权重相同，为 10。
- 标签选择器、伪元素选择器和通配符选择器：通过标签名、:: 和 \* 符号来定义，它们的权重相同，为 1。
  选择器的优先级是通过将不同类型的选择器权重相加来计算的。例如，如果某个元素应用了一个 ID 选择器和一个类选择器，那么它的优先级就是 100 + 10 = 110。如果两个选择器的优先级相同，则后面的选择器会覆盖前面的选择器。如果多个选择器的优先级仍然相同，则应用在元素上的样式将根据它们在样式表中的出现顺序而定。

### 如何实现一个三角形？有哪些方法可以实现？

在 CSS 中，可以使用伪元素（::before 和::after）以及 border 属性来创建三角形。

- 使用伪元素创建三角形
  可以使用::before 和::after 来创建三角形，设置宽度和高度为 0，然后通过 border 属性设置边框的大小、样式和颜色，再旋转伪元素来实现三角形的效果。

例如，创建一个向下的三角形可以这样写：

```html
.triangle-down::before { content: ""; width: 0; height: 0; border-left: 5px
solid transparent; border-right: 5px solid transparent; border-top: 10px solid
black; }
```

- 使用 border 属性创建三角形
  可以将一个元素的上下左右边框设置为不同的宽度和颜色来创建三角形。

例如，创建一个向右的三角形可以这样写：

```html
.triangle-right { width: 0; height: 0; border-top: 10px solid transparent;
border-left: 10px solid red; border-bottom: 10px solid transparent; }
```

- 使用 SVG 创建三角形
  可以使用 SVG 的 polygon 元素来创建三角形。

例如，创建一个向上的三角形可以这样写：

```html
<svg width="20" height="20">
  <polygon points="10,0 0,20 20,20" fill="red" />
</svg>
```

### css 实现三栏布局有哪些方法

css 哪些属性是可以继承的。

|          |      属性      |
| :------: | :------------: |
|   字体   |      font      |
|          |  font-family   |
|          |   font-size    |
|          |   font-style   |
|          |  font-weight   |
|          |  font-variant  |
|   文字   |  line-height   |
|          |   text-align   |
|          |  text-indent   |
|          | text-transfrom |
| 字母间距 | letter-spacing |
|  可见性  |   visibility   |
|  字间距  |  word-spacing  |


如何区分 px、em、rem、vw、vh
如何实现左边定宽，右边自适应。
如何实现绝对居中
css 提高性能的优化有哪些？


### 移动端适配问题